import React, {useEffect, useState} from 'react'
import {
    Row,
    Col,
    Typography,
    Flex,
    Button,
    Form,
    Input,
    Select,
    Radio,
    message
} from 'antd'
import ImageUpload from '../components/ImageUpload'
import {
    sellerIndustryList,
    sellerVerifyAdd,
    sellerVerifyDetail,
    sellerVerifyEdit
} from '../service/seller'
import {useNavigate, useParams} from 'react-router-dom'
import ImageIdUpload from '../components/ImageIdUpload'

export default function SellerAdd() {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const {id} = useParams() // 获取路由参数中的id
    const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
    // 是否审核通过
    const [pass, setPass] = useState(true)
    // 保存图像上传
    const [imageUrl, setImageUrl] = useState()
    // 保存Logo
    const [imageLogo, setImageLogo] = useState()
    const [imageId, setImageId] = useState()
    // 保存行业类型
    const [industryList, setIndustryList] = useState([])
    // 保存新增时商家类型
    const [industryType, setIndustryType] = useState('')
    useEffect(() => {
        ;(async () => {
            // 查询行业类型
            const res = await sellerIndustryList()
            setIndustryList(res.data)
            if (isEditing) {
                // 编辑时获取商家信息
                const res2 = await sellerVerifyDetail(id)
                console.log(res2)
                form.setFieldsValue(res2.data)
                setImageUrl(res2.data.businessLicense)
                setImageLogo(res2.data.businessLogo)
            }
        })()
    }, [])
    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={4}>信息管理</Typography.Title>
                        {/* <Button type="primary" icon={<PlusOutlined />}>
              新增商家
            </Button> */}
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Typography.Title level={4}>新增商家</Typography.Title>
                </Col>
                <Col span={24}>
                    <Form
                        form={form}
                        labelCol={{
                            span: 2
                        }}
                        wrapperCol={{
                            span: 16
                        }}
                        onFinish={async (v) => {
                            if (isEditing) {
                                const res = await sellerVerifyEdit({
                                    businessStatus: pass ? 2 : 3,
                                    auditRemarks: pass ? '同意' : '拒绝',
                                    id
                                })
                                console.log(res)
                                if (res.code === '0') {
                                    message.success('审批成功')
                                    navigate('/admin/seller/verify')
                                }
                            } else {
                                v.businessLicense = imageUrl
                                v.businessLogo = imageLogo
                                v.businessStatus = 1
                                const res = await sellerVerifyAdd(v)
                                console.log(res)
                                if (res.code === '0') {
                                    message.success('新增成功')
                                    navigate('/admin/seller/verify')
                                }
                            }
                        }}
                    >
                        <Form.Item
                            label="商家名称"
                            name="businessName"
                            rules={[{required: true, message: '请输入商家名称'}]}
                        >
                            <Input style={{width: 400}}/>
                        </Form.Item>
                        <Form.Item
                            label="行业类型"
                            name="industryType"
                            rules={[{required: true, message: '请输入行业类型'}]}
                        >
                            <Select
                                style={{width: 400}}
                                placeholder="请选择行业"
                                // defaultValue="1"
                                onChange={(value) => setIndustryType(value)}
                                fieldNames={{
                                    value: 'id'
                                }}
                                options={industryList}
                            />
                        </Form.Item>
                        <Form.Item
                            label="负责人"
                            name="businessHeadName"
                            rules={[{required: true, message: '请输入负责人'}]}
                        >
                            <Input style={{width: 400}} placeholder="请输入负责人"/>
                        </Form.Item>
                        <Form.Item
                            label="负责人电话"
                            name="businessHeadPhone"
                            rules={[
                                {
                                    required: true,
                                    message: '电话号码不能为空'
                                },
                                {
                                    pattern: /^1[3-9]\d{9}$/,
                                    message: '请输入正确的手机号码'
                                }
                            ]}
                        >
                            <Input style={{width: 400}} placeholder="请输入负责人电话"/>
                        </Form.Item>
                        <Form.Item
                            label="公司地址"
                            name="companyAddress"
                            rules={[{required: true, message: '请输公司地址'}]}
                        >
                            <Input style={{width: 400}} placeholder="请输入公司地址"/>
                        </Form.Item>
                        <Form.Item label="营业执照" name="businessLicense">
                            <ImageUpload imageUrl={imageUrl} setImageUrl={setImageUrl}/>
                        </Form.Item>
                        <Form.Item label="门店Logo">
                            <ImageIdUpload
                                imageUrl={imageLogo}
                                setImageUrl={setImageLogo}
                                imageId={imageId}
                                setImageId={setImageId}
                            />
                        </Form.Item>
                        <Form.Item
                            label="商家简介"
                            name="businessIntroduction"
                            rules={[{required: true, message: '请输入商家简介'}]}
                        >
                            <Input.TextArea
                                style={{width: 400, height: 100}}
                                placeholder="请输入商家简介"
                            />
                        </Form.Item>
                        <Form.Item label="审核意见">
                            <Row
                                style={{
                                    textAlign: 'center',
                                    border: '1px solid #e2e2e2',
                                    backgroundColor: '#f5f5f5',
                                    lineHeight: '32px'
                                }}
                            >
                                <Col span={5}>当前审核人</Col>
                                <Col span={5}>当前时间</Col>
                                <Col span={5}>审核意见</Col>
                                <Col span={5}>驳回原因</Col>
                                <Col span={4}>备注</Col>
                            </Row>
                            <Row
                                style={{
                                    textAlign: 'center',
                                    lineHeight: '32px'
                                }}
                            >
                                <Col span={5}>Jack</Col>
                                <Col span={5}>2023-12-12</Col>
                                <Col span={5}>
                                    <Radio.Group
                                        onChange={(e) => setPass(e.target.value === '2')}
                                    >
                                        <Radio value="2">通过</Radio>
                                        <Radio value="3">驳回</Radio>
                                    </Radio.Group>
                                </Col>
                                <Col span={5} style={{paddingRight: 10}}>
                                    {!pass && (
                                        <Select
                                            options={[
                                                {label: '营业执照不清晰', value: '营业执照不清晰'},
                                                {label: '营业执照不合法', value: '营业执照不合法'},
                                                {
                                                    label: '营业执照与公司不符',
                                                    value: '营业执照与公司不符'
                                                }
                                            ]}
                                        />
                                    )}
                                </Col>
                                <Col span={4}>
                                    {!pass && <Input.TextArea placeholder="请输入备注"/>}
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item label=" " colon={false}>
                            <Button
                                type="primary"
                                htmlType="submit"
                                style={{marginRight: 10}}
                            >
                                确定
                            </Button>
                            <Button type="default" htmlType="reset">
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </>
    )
}
